'use client';

import { useFeaturedDaos } from '@/shared/api/cms/useFeaturedDaos';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, AlertCircle, ListX } from 'lucide-react';
export default function CmsLearnPage() {
  const { data: daos, isLoading, error } = useFeaturedDaos();

  const DaoSkeleton = () => (
    <>
      {[...Array(3)].map((_, i) => (
        <Card key={i} className="flex items-center justify-between p-6 bg-card/50 border-border/50">
          <div className="space-y-2">
            <Skeleton className="h-6 w-32 bg-muted/50" />
            <Skeleton className="h-4 w-64 bg-muted/50" />
          </div>
          <Skeleton className="h-16 w-16 rounded-full bg-muted/50" />
        </Card>
      ))}
    </>
  );

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-black text-white p-4 sm:p-8">
      <div className="max-w-4xl mx-auto space-y-12">
        <Link href="/" passHref>
          <Button variant="ghost"  className="text-gray-300 hover:bg-white hover:text-black transition-colors">
            <ArrowLeft className="mr-2 h-4 w-4" />
            返回主页
          </Button>
        </Link>

        <div className="text-center">
          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-white">
            CMS 服务学习页面
          </h1>
          <p className="mt-4 text-lg text-gray-300">
            探索如何通过 CMS 服务从外部源动态获取数据。
          </p>
        </div>

        <Card className="bg-transparent border-gray-800 shadow-lg">
          <CardHeader>
            <CardTitle className="text-2xl font-semibold text-white">精选 DAOs</CardTitle>
            <CardDescription className="text-gray-400">
              由我们的 CMS 服务动态加载的去中心化自治组织列表。
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {isLoading && <DaoSkeleton />}

            {error && (
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertTitle>加载出错</AlertTitle>
                <AlertDescription>{error.message}</AlertDescription>
              </Alert>
            )}

            {!isLoading && !error && (
              <>
                {daos && daos.length === 0 ? (
                  <Alert>
                    <ListX className="h-4 w-4" />
                    <AlertTitle>暂无数据</AlertTitle>
                    <AlertDescription>未能找到任何精选 DAO。</AlertDescription>
                  </Alert>
                ) : (
                  daos?.map((dao) => (
                    <Card
                      key={dao.name}
                      // ✨ 修复 1: 将卡片的背景色和悬停背景色明确定义在这里
                      className="group transition-all duration-300 bg-gray-800/50 border-gray-700 hover:bg-gray-800 hover:border-primary hover:shadow-primary/20 hover:shadow-lg"
                    >
                      <CardContent className="p-6 flex items-center justify-between gap-6">
                        <div className="flex-1">
                          <CardTitle className="text-xl font-medium text-gray-100 group-hover:text-primary transition-colors">{dao.name}</CardTitle>
                          {/* ✨ 修复 2: 确保描述文本在任何状态下都保持亮色 */}
                          <p className="text-gray-400 mt-2">{dao.description}</p>
                        </div>
                        {dao.logo && (
                          <img
                            src={dao.logo}
                            alt={`${dao.name} logo`}
                            className="w-16 h-16 rounded-full object-contain p-1 bg-gray-900 transition-transform duration-300 group-hover:scale-110"
                          />
                        )}
                      </CardContent>
                    </Card>
                  ))
                )}
              </>
            )}
          </CardContent>
        </Card>

        {/* CMS 实现细节卡片 (保持不变) */}
        <Card className="bg-transparent border-gray-800 shadow-lg">
           <CardHeader>
             <CardTitle className="text-2xl font-semibold text-white">CMS 服务实现</CardTitle>
             <CardDescription className="text-gray-400">
               本页演示了如何使用 CMS 服务从外部源（GitHub 仓库）获取内容。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <p className="mb-6 text-gray-300">
               CMS 服务继承了 `HttpService` 类，为获取内容提供了一个清晰的 API。
             </p>
             <h3 className="text-xl font-medium mb-4 text-white">核心特性：</h3>
             <div className="flex flex-wrap gap-3">
               <Badge variant="secondary">继承 HttpService 基类</Badge>
               <Badge variant="secondary">为 GitHub 仓库配置了基础 URL</Badge>
               <Badge variant="secondary">提供类型化的内容获取方法</Badge>
               <Badge variant="secondary">使用 TanStack Query 的自定义 Hook</Badge>
               <Badge variant="secondary">自动处理 JSON 解析</Badge>
               <Badge variant="secondary">实现了恰当的错误处理</Badge>
             </div>
           </CardContent>
        </Card>
      </div>
    </div>
  );
}
